<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Cart</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/address.css">
    <script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
    <div class="container-fluid">
        <div class="row" id="header">
            <div class="col-md-4">
                <h2>I'm a new customer</h2>
            </div>
            <div class="col-md-8">
                <h2>I'm already a customer</h2>
            </div>

            <div class="col-md-3">
                Please Checkout Below  
            </div>
            <div class="col-md-1">
                or 
            </div>
            <div class="col-md-8">
                <button type="button" class="btn btn-link" id="btn_login">Sign in</button>
            </div>
        </div>
        <!-- main -->
        <div class="row" id="main">
            <div class="col-md-12">
                <div id="account">
                    <div class="col-md-12">
                        <h2>Create Account:</h2>
                    </div>
                    <div class="col-md-12">
                        <span>Username</span>
                        <input type="text" id="username"  placeholder="Username">
                        <span id="name_msg">username Duplicated！</span>
                    </div>
                    <div class="col-md-12">
                        <span>Password</span>
                        <input type="password" id="password"  placeholder="Password">
                    </div>
                </div>

                <div id="address">
                    <div class="col-md-12">
                        <h4>Delivery Address:</h4>
                    </div>
                    <div class="col-md-12">
                        <span>Full Name</span>
                        <input type="text" id="fullname" placeholder="Required">
                    </div>
                    <div class="col-md-12">
                        <span>Company Name</span>
                        <input type="text" id="companyname"  placeholder="">
                    </div>
                    <div class="col-md-12">
                        <span>Address Line 1</span>
                        <input type="text" id="address1"  placeholder="Required">
                    </div>
                    <div class="col-md-12">
                        <span>Address Line 2</span>
                        <input type="text" id="address2"  placeholder="">
                    </div>
                    <div class="col-md-12">
                        <span>City</span>
                        <input type="text" id="city"  placeholder="Required">
                    </div>
                    <div class="col-md-12">
                        <span>Region State District</span>
                        <input type="text" id="region"  placeholder="">
                    </div>
                    <div class="col-md-12">
                        <span>Country</span>
                        <input type="text" id="country"  placeholder="Required">
                    </div>
                    <div class="col-md-12">
                        <span>Postcode Zip Code</span>
                        <input type="text" id="postcode"  placeholder="Required">
                    </div>
                </div>

                
                
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div id="other" class="col-md-12">
                    <div class="col-md-12">
                        <span>Your order:( <a href="mycart.html">change</a> )</span>
                    </div>
                    <div class="col-md-12">
                        <h4>Free Standard Shipping</h4>
                    </div>
                    <div id="mycart">
                        
                        <div class="col-md-12">
                            <div>
                                <p>1 x The Creature choir HK$ 117</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <span>Total  Price:HK$ <span id="totalprice">117</span></span>
                    </div>
 
                    <div class="col-md-12" style="margin-top:5rem;">
                        <button type="button" id="btn_confirm" class="btn btn-default btn-sm">Confirm</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(function () {
            //API URL
            var apiurl="http://localhost:8080";

            function islogin(){
                var currentuser=JSON.parse(sessionStorage.getItem("book_user"));
                console.log(currentuser);
                if(currentuser==undefined || currentuser==null){
                    $("#header").show();
                    $("#account").show();
                }else{
                    $("#header").hide();
                    $("#account").hide();
                }
            }

            islogin();
            initdata();

            //Create Acount
            $("#btn_confirm").click(function(){
                var currentuser=JSON.parse(sessionStorage.getItem("book_user"));
                if(currentuser==undefined || currentuser==null){
                    var username=$("#username").val();
                    var password=$("#password").val();
                    if(username=="" || password==""){
                        alert("Please do not leavethe fields empty");
                        return false;
                    }
                    var params={user_name:username,user_pass:password};
                    $.ajax({
                        url: apiurl+"/Register.php",
                        type: "POST",
                        dataType: "json",
                        data: params,
                        success: function (data) {
                            if(data.code==0){
                                alert("register success!");
                                subinfo();
                            }else{
                                alert(data.msg);
                            }
                        }
                    });
                }else{
                    subinfo();
                }
            });

            

            function subinfo(){
                var fullname=$("#fullname").val();
                var companyname=$("#companyname").val();
                var address1=$("#address1").val();
                var address2=$("#address2").val();
                var city=$("#city").val();
                var region=$("#region").val();
                var country=$("#country").val();
                var postcode=$("#postcode").val();
                if(fullname=="" || address1=="" || city=="" || country=="" || postcode==""){
                    alert("Please do not leavethe fields empty");
                    return false;
                }else{
                    var user_address={
                        fullname:fullname,
                        companyname:companyname,
                        address1:address1,
                        address2:address2,
                        city:city,
                        region:region,
                        country:country,
                        postcode:postcode,
                    };
                    sessionStorage.setItem("user_address",JSON.stringify(user_address));
                    window.location.href="invoice.html";
                }
            }

            function inithtml(book_cart) {
                var myCart = $("#mycart");
                myCart.html("");
                var html = "";
                var totalprice = 0;
                for (var i = 0; i < book_cart.length; i++) {
                    var book = book_cart[i];
                    var str = '<div class="col-md-12">' +
                        '<div>' +
                        '<p>' + book.Quantity + ' x ' + book.name + ' HK$ ' + book.price + '</p>' +
                        '</div>' +
                        '</div>';
                    html += str;

                    totalprice += ((book.price * 1) * book.Quantity);
                }
                myCart.html(html);
                $("#totalprice").text(totalprice);
            }

            // initdata book
            function initdata(){
                var currentuser=JSON.parse(sessionStorage.getItem("book_user"));
                if(currentuser==undefined || currentuser==null){
                    var book_cart=sessionStorage.getItem("book_cart");
                    if(book_cart==null || book_cart==undefined){
                        
                    }else{
                        book_cart=JSON.parse(book_cart);
                        inithtml(book_cart);
                    }
                }else{
                    $.ajax({
                        url: apiurl+"/Cart.php",
                        type: "POST",
                        dataType: "json",
                        success: function (data) {
                            if(data.code==0){
                                inithtml(data.data);
                            }else{
                                alert(data.msg);
                            }
                        }
                    });
                }

            }

            $("#username").blur(function(){
                var username=$("#username").val();
                if(username!=""){
                    $.ajax({
                        url: apiurl+"/User.php",
                        type: "POST",
                        dataType: "json",
                        data: {user_name:username},
                        success: function (data) {
                            console.log(data);
                            if(data.code==0){
                                $("#name_msg").hide();
                            }else{
                                $("#name_msg").show();
                            }
                        }
                    });
                }
                
            });

            $("#btn_login").click(function(){
                window.location.href="login.html";
            });

           

            
        })
    </script>

</body>
</html>